<template>
<div>
  <h1>运单列表</h1>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="gnum"
      label="发货单号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="create_time"
      label="创建时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="cid"
      label="客户名称">
    </el-table-column>
    <el-table-column
      prop="cid"
      label="公司地址">
    </el-table-column>
    <el-table-column
      prop="cid"
      label="联系人姓名">
    </el-table-column>
    <el-table-column
      label="结束时间"
      width="100">
      <template slot-scope="scope">
          <div slot="reference" class="name-wrapper" v-if="scope.row.state==1">
              {{scope.row.alter_time}}
          </div>
          <div slot="reference" class="name-wrapper" v-else>
              暂无
          </div>
      </template>
    </el-table-column>
    <el-table-column
      label="运单状态"
      width="100">
      <template slot-scope="scope">
          <div slot="reference" class="name-wrapper" v-if="scope.row.state==1">
              完成
          </div>
          <div slot="reference" class="name-wrapper" v-else>
              在途
          </div>
      </template>
    </el-table-column>
    <el-table-column
      label="温度"
      width="100">
      <template slot-scope="scope">
          <div slot="reference" class="name-wrapper" v-if="scope.row.state==1">
              <span v-if="scope.row.baojing==1">
                <font color="#FF0000">报警</font> 
                
              </span>
              <span v-else>
                正常
              </span>
          </div>
          <div slot="reference" class="name-wrapper" v-else>
              未完成
          </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="cid"
      label="联系人电话">
    </el-table-column>
    <!-- <el-table-column
      label="操作">
      <a :href="'./xiangqing?id='+id">查看详情</a>
    </el-table-column> -->
    <el-table-column
      label="操作"
      width="100">
      <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
              <!-- <span v-if="scope.row.state==1">
                <Button @click="shouhuo(scope.row.id)">收货</Button>
              </span> -->
              <span v-if="scope.row.state==0">
              </span>
              <span v-else>
                <a :href="'./xiangqing?id='+scope.row.id">查看详情</a>
              </span>
              <span v-if="scope.row.state==0">
                <Button @click="shouhuo(scope.row.id)">收货</Button>
              </span>
              <span v-else></span>
          </div>
      </template>
    </el-table-column>
    <!-- <el-table-column label="操作">
        <a :href="'./xiangqing?id='+data.id">查看详情</a>
    </el-table-column> -->
  </el-table>

  </div>
</template>

<script>
import { showgoods_post,shouhuo_post } from './axios_api/api';
  export default {
    data() {
      return {
        tableData: []
      }
    },
    mounted(){
      this.gettag()
    },
    methods:{
        shouhuo(id){
            var id = id
            var data = {id:id}
            shouhuo_post(data).then(resp=>{
                this.$Message(resp.message)
            })
        },
      gettag(){
        showgoods_post().then(resp=>{
          this.tableData = resp.goodslist
          console.log(this.tableData);
        })
      }
    }
  }
</script>
